<template>
  <CustomTabs>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="基本信息" name="brief" lazy>
        <Brief
          ref="brief"
          :value="group"
          @change="handleChange"
          @manage-device="handleManageDevice"
        />
      </el-tab-pane>
      <el-tab-pane label="设备列表" name="deviceList" lazy>
        <DeviceList @change="handleDeviceListChange" />
      </el-tab-pane>
    </el-tabs>
  </CustomTabs>
</template>

<script>
  import CustomTabs from '@/components/custom-tabs'
  import Brief from './components/brief'
  import DeviceList from './components/device-list'

  export default {
    name: 'GroupDetail',
    components: { CustomTabs, Brief, DeviceList },
    data() {
      return {
        activeName: 'brief',
        group: {}
      }
    },
    methods: {
      handleChange() {},
      handleManageDevice() {
        this.activeName = 'deviceList'
      },
      handleDeviceListChange() {
        this.$refs.brief.reflash()
      }
    }
  }
</script>

<style scoped></style>
